<template>
	<view class="gui-padding">
		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view class="gui-margin-top-large"></view>
		<form @submit="submit">

			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">上传店铺Logo</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change" ref="uploadimgcom" @uploaded="uploaded"
					:uploadServerUrl="photo_upload_url" maxFileNumber="1"></gui-upload-images>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">店铺名称</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="name" name="name" placeholder="请输入店铺名称" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">店铺电话</text>
				<view class="gui-form-body">
					<input type="number" class="gui-form-input" v-model="phone_number" name="phone_number"
						placeholder="请输入店铺电话" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">所在城市</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" :value="value2" disabled placeholder="请选择" @tap="open2" />
				</view>
				<text class="gui-icons gui-form-icon gui-color-gray gui-text-right">&#xe603;</text>
			</view>


			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">详细地址</text>
				<view class="gui-form-body">
					<textarea v-model="address" name="address" value="" placeholder="请输入店铺详细地址"
						class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;"
						@tap="choose_location()" />

				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">营业时间</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="business_hours" name="business_hours"
						placeholder="请输入营业时间" />
				</view>
			</view>


			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">上传相册</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change2" ref="uploadimgcom2" @uploaded="uploaded2"
					:uploadServerUrl="photo_upload_url" maxFileNumber="20"></gui-upload-images>
			</view>

			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">上传环境设施</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change3" ref="uploadimgcom3" @uploaded="uploaded3"
					:uploadServerUrl="photo_upload_url" maxFileNumber="20"></gui-upload-images>
			</view>

			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">上传运动实拍</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change4" ref="uploadimgcom4" @uploaded="uploaded4"
					:uploadServerUrl="photo_upload_url" maxFileNumber="20"></gui-upload-images>
			</view>





			<gui-area-picker ref="graceAddressPicker2" @confirm="confirm2" :value="default2"
				v-if="default2 != null"></gui-area-picker>



			<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;" formType="submit">
					<text class="gui-icons gui-color-white gui-button-text">保存</text>
				</button>
			</view>
			<view style="height:100rpx;"></view>
		</form>
	</view>
</template>
<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				default2: ['湖北省', '武汉市', '武昌区'],
				textareaVal: '',
				subtxt: '',
				is_upload1: 1,
				is_upload2: 1,
				is_upload3: 1,
				is_upload4: 1,
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				needPploadedImgs2: [],
				needPploadedImgs3: [],
				needPploadedImgs4: [],
				photo_upload_url: this.serverUrl + '/api.common/upload',
				formData: {
					name1: "GraceUI",
					name2: "888888",
					name3: "888888",
					name4: "888888@qq.com",
					name5: '请选择性别',
					name7: '123456'
				},
				gender: ['请选择性别', '男', '女'],
				mobile: '',
				business_hours: '',
				genderIndex: 0,
				real_name: '',
				name: '',
				phone_number: '',
				value2: '',
				id_card: '',
				license_number: '',
				license: '',
				logo: '',
				idcard_zheng: '',
				idcard_fan: '',
				address: '',
				latitude: '',
				longitude: '',
				idCard1: this.id_card_zheng_img,
				idCard2: this.id_card_fan_img,
				province: "",
				city: "",
				area: ""
			}
		},
		onLoad: function(query) {
			let _this = this;
			this.$globalMethod();
			this.getUserInfo();
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.loadCity(res.longitude, res.latitude);
				}
			});
		},
		methods: {
			loadCity(longitude, latitude) {
				let _this = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo', //仅为示例，并非真实接口地址。
					data: {
						key: _this.gaodeKey,
						location: longitude + ',' + latitude,
						extensions: 'all'
					},

					success: (res) => {
						// console.log(res.data);
						var return_data = res.data;
						console.log(return_data);
						if (return_data.status == 1) {
							if (res.data.regeocode.addressComponent.city == '') {
								_this.default2[0] = return_data.regeocode.addressComponent.province;
								_this.default2[1] = return_data.regeocode.addressComponent.province;
								_this.default2[2] = return_data.regeocode.addressComponent.district;
							} else {
								_this.default2[0] = return_data.regeocode.addressComponent.province;
								_this.default2[1] = return_data.regeocode.addressComponent.city;
								_this.default2[2] = return_data.regeocode.addressComponent.district;
							}

							_this.value2 = _this.default2[0] + ',' + _this.default2[1] + ',' + _this.default2[
								2];
							this.province = _this.default2[0];
							this.city = _this.default2[1];
							this.area = _this.default2[2];

							console.log(_this.default2);
							console.log(_this.value2);
						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							});
						}
					}
				});

			},
			// 第2个组件相关
			open2: function() {
				this.$refs.graceAddressPicker2.open();
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.province = e.names[0];
				this.city = e.names[1];
				this.area = e.names[2];
			},
			getUserInfo() {
				let _this = this;

				_this.is_upload1 = 0;
				_this.is_upload2 = 0;
				_this.is_upload3 = 0;
				_this.is_upload4 = 0;

				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.shop/my_shop_info', //仅为示例，并非真实接口地址。

					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						// console.log(return_data);
						if (return_data.code == 0) {
							_this.name = return_data.data.shop_info.name;
							_this.phone_number = return_data.data.shop_info.mobile;
							_this.default2[0] = return_data.data.shop_info.province;
							_this.default2[1] = return_data.data.shop_info.city;
							_this.default2[2] = return_data.data.shop_info.area;
							_this.value2 = return_data.data.shop_info.province + ',' + return_data.data
								.shop_info.city + ',' + return_data.data.shop_info.area;
							_this.address = return_data.data.shop_info.address;
							_this.business_hours = return_data.data.shop_info.business_hours;



							_this.$refs.uploadimgcom.setItems([return_data.data.shop_info.logo]);
							_this.is_upload1 = 1;


							_this.$refs.uploadimgcom2.setItems(return_data.data.xiangce);
							_this.is_upload2 = 1;

							_this.$refs.uploadimgcom3.setItems(return_data.data.huanjing);
							_this.is_upload3 = 1;

							_this.$refs.uploadimgcom4.setItems(return_data.data.sport);
							_this.is_upload4 = 1;


						}
					}
				});
			},
			selectImg1: function() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						_this.idCard1 = res.tempFilePaths[0];

						var loading = uni.showLoading({
							title: '上传中',
							mask: true,
						})
						uni.uploadFile({
							url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'laytpUploadFile',
							header: {
								token: _this.token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								var return_data = JSON.parse(uploadFileRes.data);
								console.log(return_data);
								console.log(return_data.code);
								if (return_data.code == 0) {
									_this.idCard1 = return_data.data.path;
								}
							},
							fail: function(e) {
								uni.hideLoading();
								console.log(e);
							}
						});
					}
				})
			},
			selectImg2: function() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.idCard2 = res.tempFilePaths[0];

						var loading = uni.showLoading({
							title: '上传中',
							mask: true,
						})
						uni.uploadFile({
							url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'laytpUploadFile',
							header: {
								token: _this.token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								var return_data = JSON.parse(uploadFileRes.data);
								if (return_data.code == 0) {
									_this.idCard2 = return_data.data.path;
								}
							},
							fail: function(e) {
								uni.hideLoading();
								console.log(e);
							}
						});
					}
				})
			},
			choose_location() {
				let _this = this;
				uni.chooseLocation({
					success: function(res) {
						_this.address = res.address + res.name;
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
					},
					fail: function(e) {
						uni.showToast({
							title: e.errorMsg,
							icon: 'error'
						});
					}
				});

			},
			change: function(e) {
				this.needPploadedImgs = e;
				if (this.is_upload1 == 1) {
					this.uploaded(this.needPploadedImgs);
				}

			},
			change2: function(e) {
				this.needPploadedImgs2 = e;
				if (this.is_upload2 == 1) {
					this.uploaded2(this.needPploadedImgs2);
				}
			},
			change3: function(e) {
				this.needPploadedImgs3 = e;
				if (this.is_upload3 == 1) {
					this.uploaded3(this.needPploadedImgs3);
				}
			},
			change4: function(e) {
				this.needPploadedImgs4 = e;
				if (this.is_upload4 == 1) {
					this.uploaded4(this.needPploadedImgs4);
				}
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs[index].progress = 100;
								_this.needPploadedImgs[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})
			},
			uploaded2: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs2.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs2[index].progress = 100;
								_this.needPploadedImgs2[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})
			},
			uploaded3: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs3.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs3[index].progress = 100;
								_this.needPploadedImgs3[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})
			},
			uploaded4: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs4.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs4[index].progress = 100;
								_this.needPploadedImgs4[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})
			},
			submit: function(e) {



				var needPploadedImgs = this.needPploadedImgs;
				if (needPploadedImgs.length < 1) {
					uni.showToast({
						title: "请上传Logo",
						icon: "none"
					});
					return;
				}

				var needPploadedImgs2 = this.needPploadedImgs2;
				if (needPploadedImgs2.length < 1) {
					uni.showToast({
						title: "请上传营业相册照片",
						icon: "none"
					});
					return;
				}

				var needPploadedImgs3 = this.needPploadedImgs3;
				if (needPploadedImgs3.length < 1) {
					uni.showToast({
						title: "请上传环境设施照片",
						icon: "none"
					});
					return;
				}


				var needPploadedImgs4 = this.needPploadedImgs4;
				if (needPploadedImgs4.length < 1) {
					uni.showToast({
						title: "请上传运动实拍照片",
						icon: "none"
					});
					return;
				}

				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				formData['logo'] = this.needPploadedImgs[0].url;
				formData['province'] = this.province;
				formData['city'] = this.city;
				formData['area'] = this.area;
				formData['xiangce'] = this.needPploadedImgs2;
				formData['huanjing'] = this.needPploadedImgs3;
				formData['sport'] = this.needPploadedImgs4;
				console.log(formData);




				let _this = this;
				_this.$refs.guipageloading.open();

				_this.graceJS.post(_this.serverUrl + '/api.shop/shop_edit', formData, 'json', {
						token: _this.token
					}, (res) => {
						_this.$refs.guipageloading.close();
						if (res.code == 0) {


							uni.navigateTo({
								url: '/pages/my/shop_index',
								success: function() {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 2000
									});
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							});
						}
					},
					(e) => {
						console.log(e);
						uni.showToast({
							title: '网络请求失败，请稍后再试',
							icon: 'error'
						});
						_this.$refs.guipageloading.close();
					})





			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
				this.formData.name5 = this.gender[this.genderIndex];
			},
		}
	}
</script>
<style>
	.gui-idcard-main {
		margin: 25rpx;
	}

	.gui-idcard-desc {
		background-color: #FFFFFF;
		color: #666666;
		line-height: 56rpx;
		font-size: 26rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.gui-idcard-text {
		line-height: 1.8em;
		margin-top: 30rpx;
		color: #666666;
	}

	.gui-idcard-items {
		background-color: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}

	.gui-idcard-items-image {
		width: 380rpx;
	}
</style>